<template>
  <div class="container">
    <div class="title">
      选择支付方式
    </div>
    <div class="select-bar clearfix">
      <div class="select-item">
        <img :src="img_url+'/mp_3.0/微信支付图标@2x.png'"
             v-if="img_url"
             alt=""
             class="item-logo">
        <div class="item-name">
          微信支付
        </div>
        <img :src="img_url+'/mp_3.0/选中图标@2x.png'"
             v-if="img_url"
             alt=""
             class="item-status">
      </div>
    </div>
    <div class="bottom-bar clearfix">
      <div class="pay-btn"
           @tap.stop="wechat_pay()">
        确认支付
      </div>
      <div class="total">
        总计：<div class="money">{{pay_data.totalPrice}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import common from '@/assets/js/mmk_common.js'
export default {
  data () {
    return {
      img_url: common.image_resource,
      pay_data: {
        mall_name: "",
        order_sn: "",
        totalPrice: 0,
        type: ""
      }
    };
  },
  methods: {

    // 支付
    wechat_pay () {
      let that = this
      common.fly_post(
        'api/v4_5/payment/wechatpay_miniapp_submit',
        {
          //预支付
          openid: wx.getStorageSync('open_id'),
          body: this.pay_data.mall_name,
          order_sn: this.pay_data.order_sn,
          total: this.pay_data.totalPrice,
          submit_type: this.pay_data.type
        },
        response => {
          common.mmk_Loading(1)
          let res = response.data
          if (res.status_code == 0) {
            wx.requestPayment({
              timeStamp: res.data.timeStamp,
              nonceStr: res.data.nonceStr,
              package: res.data.package,
              signType: 'MD5',
              paySign: res.data.paySign,
              success: function (res) {
                // console.log(that.pay_data.order_sn, that.pay_data.type);
                // 支付成功
                wx.redirectTo({ url: `/pages/package_lifebeauty/pay_success_beauty/main?order_sn=${that.pay_data.order_sn}&type=${that.pay_data.type}` });
              },
              fail: function (res) {
                //  支付失败
                wx.showToast({
                  title: '支付失败，请重试', //提示的内容,
                  icon: 'none', //图标,
                  duration: 1500, //延迟时间,
                  mask: true, //显示透明蒙层，防止触摸穿透,
                  success: res => {
                    setTimeout(() => {
                      if (that.pay_data.type == 'service_order') {
                        wx.redirectTo({ url: '/pages/package_mine/project_order_list/main' });
                      } else {
                        wx.navigateBack({
                          delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
                        });
                      }
                    }, 1500);
                  }
                });
              }
            })

          } else {
            common.mmk_Loading(1)
            common.mmk_Loading(2, res.message)
          }
        }
      )
    },
  },
  onLoad (options) {
    // 接受支付信息
    if (options.mall_name) {
      this.pay_data = options
    }

  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: rgba(243, 244, 246, 1);
  .title {
    font-size: 14px;
    font-family: "PingFangSC-Medium", "PingFang SC";
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    line-height: 50px;
    padding-left: 15px;
  }
  .select-bar {
    height: 60px;
    padding: 0 15px;
    background-color: #fff;
    position: relative;
    .item-logo {
      width: 35px;
      height: 35px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 10px;
    }
    .item-name {
      line-height: 60px;
      font-size: 14px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      display: inline-block;
      vertical-align: middle;
    }

    .item-status {
      width: 20px;
      height: 20px;
      display: inline-block;
      vertical-align: middle;
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .bottom-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
    padding: 0 15px;
    box-sizing: border-box;
    .total {
      font-size: 12px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      float: right;
      vertical-align: middle;
      line-height: 50px;
      .money {
        font-size: 14px;
        font-family: "STHeitiTC-Medium", "STHeitiTC";
        font-weight: 500;
        color: rgba(255, 56, 62, 1);
        display: inline-block;
        vertical-align: middle;
        line-height: 50px;
      }
    }
    .pay-btn {
      width: 88px;
      height: 40px;
      background: rgba(255, 56, 62, 1);
      border-radius: 20px;
      font-size: 12px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 40px;
      text-align: center;
      float: right;
      vertical-align: middle;
      margin-top: 5px;
      margin-left: 10px;
    }
  }
}
</style>

